<template>
  <div class="feature-overlay">
    <transition name="fade" v-on:enter="handleEnter" v-on:after-leave="handleAfterLeave">
      <div class="feature-overlay-wrapper" v-show="visible">
        <div class="feature-overlay-title">
          <span>{{ title }}</span>
          <i class="feature-overlay-closer el-icon-close" v-on:click="closePopup"></i>
        </div>
        <TempProjFeatureOverlay v-if="isTemporaryProject" :feature="feature" :editing="editing"></TempProjFeatureOverlay>
      </div>
    </transition>
  </div>
</template>

<script>
import Overlay from "ol/Overlay";

import TempProjFeatureOverlay from "@/components/TempProjFeatureOverlay.vue";

export default {
  name: "feature-overlay",
  components: {
    TempProjFeatureOverlay
  },
  data() {
    return {
      visible: false,
      popup: null,
      map: null,
      feature: null,
      fit: false,
      editing: false
    };
  },
  computed: {
    isTemporaryProject() {
      const _this = this;
      let isTemporaryProject = false;
      let type = _this.feature.get("type");
      switch (type) {
        case "spoil":
        case "fetch":
        case "mixing":
        case "beam":
        case "sleeper":
        case "track":
        case "steel":
        case "transfer":
        case "temporary":
        case "camp":
        case undefined:
        case null:
        case "":
        case "other": {
          isTemporaryProject = true;
          break;
        }
      }
      return isTemporaryProject;
    },
    title() {
      const _this = this;
      let title = "";
      if (_this.editing) {
        title = "要素编辑";
      } else {
        title = _this.feature.get("name") || "未命名";
      }
      return title;
    }
  },
  methods: {
    initPopup() {
      const _this = this;
      _this.popup = new Overlay({
        element: _this.$el,
        positioning: "bottom-center",
        stopEvent: true,
        offset: [0, -40],
        autoPan: true,
        autoPanAnimation: {
          duration: 300
        }
      });
      _this.map.addOverlay(_this.popup);
    },
    showPopup() {
      const _this = this;
      _this.visible = true;
      _this.feature.on("removed", _this.closePopup);
      _this.feature.on("change", _this.handleFeatureChange);
    },
    closePopup() {
      const _this = this;
      _this.visible = false;
      _this.feature.un("removed", _this.closePopup);
      _this.feature.un("change", _this.handleFeatureChange);
    },
    handleEnter() {
      const _this = this;
      _this.initPopup();
      let geometry = _this.feature.getGeometry();
      let coordinates = geometry.getCoordinates();
      if (_this.fit) {
        _this.map.getView().fit(geometry, {
          duration: 300,
          maxZoom: 18,
          callback: () => {
            _this.popup.setPosition(coordinates);
          }
        });
      } else {
        _this.popup.setPosition(coordinates);
      }
    },
    handleAfterLeave() {
      const _this = this;
      _this.popup.setPosition(null);
      _this.map.removeOverlay(_this.popup);
      _this.$destroy();
    },
    handleFeatureChange() {
      const _this = this;
      let geometry = _this.feature.getGeometry();
      let coordinates = geometry.getCoordinates();
      _this.popup.setPosition(coordinates);
    }
  }
};
</script>

<style>
.feature-overlay {
  width: 280px;
  font-size: 14px;
}

.feature-overlay-wrapper {
  position: relative;
  height: 100%;
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 3px 3px 2px 1px rgba(0, 0, 0, 0.3);
  border: 1px solid lightgray;
  display: flex;
  flex-direction: column;
}

.feature-overlay-wrapper::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translate(-50%, 0);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid rgba(0, 0, 0, 0.2);
}

.feature-overlay-wrapper::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translate(-50%, 0);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

.feature-overlay-title {
  background-color: #79c74e;
  color: white;
  height: 24px;
  line-height: 24px;
  text-align: center;
  padding: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.feature-overlay-closer {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
</style>
